<template>
  <div class="lookExamDetails">
    <!-- 单选 -->
    <div class="danxuan" v-show="danxuan.length != 0">
      <h3>单选题</h3>
      <div v-for="(item,index) in danxuan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-radio
          disabled
          v-for="(item2, index2) in item.choice"
          v-model="item.studentAnswer"
          :key="index2"
          :label="index2"
          style="width: 100%"
        >
          {{ item2 }}
        </el-radio>
        <p>正确答案{{item.answer}}</p>
         <el-input  placeholder="请打分" v-model="danxuaninput[index]"></el-input>
      </div>
    </div>

    <!-- 填空题 -->
    <div class="tiankong" v-show="tiankong.length != 0">
      <h3>填空题</h3>
      <div v-for="(item,index) in tiankong" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
        <p>正确答案：{{item.answer}}</p>
         <el-input  placeholder="请打分" v-model="tiankonginput[index]"></el-input>
      </div>
    </div>

    <!-- 多选 -->
    <div class="duoxuan" v-show="duoxuan.length != 0">
      <h3>多选题</h3>
      <div v-for="(item,index) in duoxuan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-checkbox-group v-model="item.studentAnswer">
          <el-checkbox
            disabled
            v-for="(item2, index2) in item.choice"
            :key="index2"
            size="small"
            :label="item2"
            style="width: 100%"
          ></el-checkbox>
        </el-checkbox-group>
        <p>正确答案：<span v-for="(item3,index3) in item.answer" :key="index3">{{item3}}</span></p>
         <el-input  placeholder="请打分" v-model="duoxuaninput[index]"></el-input>
      </div>
    </div>

    <!-- 判断 -->
    <div class="panduan" v-show="panduan.length != 0">
      <h3>判断题</h3>
      <div v-for="(item,index) in panduan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-radio disabled v-model="item.studentAnswer" label="0"
          >正确</el-radio
        >
        <el-radio disabled v-model="item.studentAnswer" label="1"
          >错误</el-radio
        >
        <p>正确答案：{{item.answer==0?'正确':'错误'}}</p>
         <el-input  placeholder="请打分" v-model="panduaninput[index]"></el-input>
      </div>
    </div>

    <!-- 简答题 -->
    <div class="tiankong" v-show="jianda.length != 0">
      <h3>简答题</h3>
      <div v-for="(item,index) in jianda" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
        <p>正确答案：{{item.answer}}</p>
         <el-input  placeholder="请打分" v-model="jiandainput[index]"></el-input>
      </div>
    </div>

    <!-- 程序题 -->
    <div class="tiankong" v-show="chengxu.length != 0">
      <h3>程序题</h3>
      <div v-for="(item,index) in chengxu" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
        <p>正确答案：{{item.answer}}</p>
         <el-input  placeholder="请打分" v-model="chengxuinput[index]"></el-input>
      </div>
    </div>

    <el-button style="margin-top:10px" type="primary" @click="submit">提交</el-button>
  </div>
</template>
<script>
import axios from "axios";
import qs from 'qs'
import { Message } from "element-ui";
export default {
  props: ["eid","major","classroom"],
  data() {
    return {
      question: [],
      answer: [],
      danxuan: [], //单选
      duoxuan: [], //多选
      tiankong: [], //填空题
      panduan: [], //填空题
      jianda: [], //简答题
      chengxu: [], //程序题
      danxuaninput: [], //单选
      duoxuaninput: [], //多选
      tiankonginput: [], //填空题
      panduaninput: [], //填空题
      jiandainput: [], //简答题
      chengxuinput: [], //程序题
      flag:false
    };
  },
  methods: {
    //提交请求
      submitAxios(arr,score) {
      axios({
        method: "put",
        url: "/v1/teachers/updatestudentexaminfo",
        data: qs.stringify(
          {
            //数组无法直接存入数据库，转为字符串
            arr: JSON.stringify(arr), //用户选择的答案
            score: score,
            eid:this.eid,
            major:this.major,
            classroom:this.classroom
          },
          { indices: false }
        ),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      })
        .then((result) => {
          if (result.data.status == 200) {
            Message.success({
              showClose: true,
              message: "批改成功",
              type: "success",
            });
            this.$router.push("/teacherHome");
            window.onblur = null;
          } else {
            Message.error({
              showClose: true,
              message: "批改失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交
    submit(){
      //单选分数
      for(let i=0;i<this.danxuaninput.length;i++){
        if(this.danxuaninput[i]!=undefined &&this.danxuaninput.length==this.danxuan.length){
          this.danxuan[i].score=this.danxuaninput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }

      //多选分数
      for(let i=0;i<this.duoxuaninput.length;i++){
        if(this.duoxuaninput[i]!=undefined &&this.duoxuaninput.length==this.duoxuan.length){
          this.duoxuan[i].score=this.duoxuaninput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }

      //填空分数
      for(let i=0;i<this.tiankonginput.length;i++){
        if(this.tiankonginput[i]!=undefined &&this.tiankonginput.length==this.tiankong.length){
          this.tiankong[i].score=this.tiankonginput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }

      //判断分数
      for(let i=0;i<this.panduaninput.length;i++){
        if(this.panduaninput[i]!=undefined &&this.panduaninput.length==this.panduan.length){
          this.panduan[i].score=this.panduaninput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }

      //简答分数
      for(let i=0;i<this.jiandainput.length;i++){
        if(this.jiandainput[i]!=undefined &&this.jiandainput.length==this.jianda.length){
          this.jianda[i].score=this.jiandainput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }

      //程序分数
      for(let i=0;i<this.chengxuinput.length;i++){
        if(this.chengxuinput[i]!=undefined &&this.chengxuinput.length==this.chengxu.length){
          this.chengxu[i].score=this.chengxuinput[i]
          this.flag=true;
        }else{
          this.flag=false
        }
      }
      //console.log(this.danxuan,this.duoxuan,this.tiankong,this.panduan,this.jianda,this.chengxu)
      //console.log(this.danxuaninput,this.duoxuaninput,this.tiankonginput,this.panduaninput,this.jiandainput,this.chengxuinput)

      if(this.flag==false){
        Message.error({
            showClose: true,
            message: "还有未给分的题",
            type: "error",
          });
      }else{
        let arr=[...this.danxuan,...this.duoxuan,...this.tiankong,...this.panduan,...this.jianda,...this.chengxu]
        //console.log(arr)
        let score=0;
        for(let i=0;i<arr.length;i++){
          score+=parseInt(arr[i].score)
        }
        //console.log(score)
        this.submitAxios(arr,score)
      }
    },
    //获取学生考试信息
    getAnswer() {
      axios
        .get(`/v1/teachers/studentexaminfo/${this.eid}&${this.major}&${this.classroom}`)
        .then((res) => {
          if (res.data.status == 200) {
            //   console.log(res.data)
            this.answer = JSON.parse(res.data.data[0].answer);

            for (let i = 0; i < this.answer.length; i++) {
              //单选
              if (this.answer[i].questionType == "1") {
                this.danxuan.push(this.answer[i]);
              } else if (this.answer[i].questionType == "2") {
                //填空
                this.tiankong.push(this.answer[i]);
              } else if (this.answer[i].questionType == "3") {
                //多选
                this.duoxuan.push(this.answer[i]);
              } else if (this.answer[i].questionType == "4") {
                //判断
                this.panduan.push(this.answer[i]);
              } else if (this.answer[i].questionType == "5") {
                //简答
                this.jianda.push(this.answer[i]);
              } else if (this.answer[i].questionType == "6") {
                //程序
                this.chengxu.push(this.answer[i]);
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    //   console.log(this.eid,this.major)
    this.getAnswer();
  },
};
</script>
<style lang="scss">
.lookExamDetails {
  margin-top: 20px;
  width: 100%;
}
</style>